<template>
  <div class="com-study-calendar qy-user-calendar" :class="fixed && calendarFixed ? 'fixed' : ''">
    <div class="month-ctrl flex-wrap flex-center flex-middle" :style="cStyle">
      <van-icon v-if="!isTeacher" name="arrow-left" class="abs-left" @click="goUser" size="16px"/>
      <button type="default" class="btn" @click="pre" :disabled="disablePreMonthCtrl">
		  <van-icon name="arrow-left" size="16px"/>
	  </button>
      <span>{{ calendarYear }}年{{ calendarMonth + 1 }}月</span>
      <button type="default" class="btn" icon="arrow" @click="next" :disabled="disableNextMonthCtrl">
		  <van-icon name="arrow" size="16px"/>
	  </button>
      <button v-if="!isTeacher" type="primary" size="mini" class="abs-btn" @click="back">返回今日</button>
    </div>
    <div class="week-title">
      <div class="week-each" v-for="(item, index) in weeks" :key="index">{{ item }}</div>
    </div>
    <div class="day-wrap">
      <div class="day-each" :class="'week_' + Math.ceil(index / 7)" v-for="index of currentEmptyDays"></div>
      <div class="day-each" v-for="index of currentMonthDays"
           :class="[
            isCurrentDay(index) ? 'current' : '',
            showTips(index) ? 'has-tip' : '',
            disableDays(index) ? 'disabled' : '',
            isToday(index) ? 'today' : '',
            'week_' + Math.ceil((currentEmptyDays + index) / 7)
            ]">
        <span @click="clickDay(index)">{{ isToday(index) ? '今' : index }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { weeks } from '@/assets/js/constant'
import { dateFormat } from '@/assets/js/util'
import vanIcon from "@/components/vant/van-icon/van-icon.vue"
export default {
	components:{
		vanIcon
	},
  data() {
    return {
      weeks: weeks,
      calendarMonth: 0,
      calendarYear: 0,
      currentDay: ''
    }
  },

  props: {
    currentYear: {
      type: Number,
      default: new Date().getFullYear()
    },
    currentMonth: {
      type: Number,
      default: new Date().getMonth()
    },
    today: {
      type: String,
      default: () => dateFormat('', 'yyyy-MM-dd')
    },
    tipsDays: {
      type: [Array, Object],
      default: () => []
    },
    dateRange: {
      type: Array,
      default: () => []
    },
    fixed: {
      type: Boolean,
      default: false
    },
    calendarFixed: {
      type: Boolean,
      default: true
    },
    isTeacher: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    fixed(val) {
      let dayEles = [... $('.day-wrap .day-each')]
      if (val) {
        let className = $('.day-wrap .current').attr('class')
        let weekClass = className ? className.split(' ').find(item => item.indexOf('week') > -1) : 'week_1'
        dayEles.forEach(item => {
          if (!$(item).hasClass(weekClass)) {
            $(item).hide(400)
          }
        })
      } else {
        dayEles.forEach(item => {
          $(item).show(400)
        })
      }
    }
  },
  mounted() {
    this.calendarYear = this.currentYear
    this.calendarMonth = this.currentMonth
    this.currentDay = this.today
  },
  computed: {
    // 当月总天数
    currentMonthDays() {
      return new Date(this.calendarYear, this.calendarMonth + 1, 0).getDate()
    },
    // 当月第一天是周几
    currentMonthFirstDay() {
      return new Date(this.calendarYear, this.calendarMonth, 1).getDay()
    },
    // 月初始前几天
    currentEmptyDays() {
      if (this.currentMonthFirstDay) {
        return this.currentMonthFirstDay - 1
      } else {
        return 6
      }
    },
    // 是否允许切换日历月份
    disablePreMonthCtrl() {
      if (this.dateRange && this.dateRange.length > 0) {
        if (new Date(this.dateRange[0]).getMonth() > this.calendarMonth - 1) {
          return true
        }
        return false
      }
      return false
    },
    disableNextMonthCtrl() {
      if (this.dateRange && this.dateRange.length > 1) {
        if (new Date(this.dateRange[1]).getMonth() < this.calendarMonth + 1) {
          return true
        }
        return false
      }
      return false
    },
    cStyle(){
      if (this.isTeacher) {
        return {padding: '20px 0', 'border-bottom': 'none'}
      }else {
        return { padding: '0 0 10px 0' }
      }
    }
  },
  methods: {
    dayStr(day) {
      let month = (this.calendarMonth + 1) < 10 ? '0' + (this.calendarMonth + 1) : (this.calendarMonth + 1);
      day = day < 10 ? '0' + day : day
      return this.calendarYear + '-' + month + '-' + day
    },

    isToday(day) {
      return this.dayStr(day) === this.today
    },

    isCurrentDay(day) {
      return this.dayStr(day) === this.currentDay
    },

    showTips(day) {
      return this.tipsDays[day] > 0
    },

    disableDays(day) {
      if (this.dateRange && this.dateRange.length > 0) {
        let firstDay = this.dateRange[0],
            lastDay = this.dateRange.length > 1 ? this.dateRange[1] : ''
        if (new Date(this.dayStr(day)).getTime() < new Date(firstDay).getTime() || (lastDay && new Date(this.dayStr(day)).getTime() > new Date(lastDay).getTime())) {
          return true
        }
      }
      return false
    },

    clickDay(day) {
      if (!this.disableDays(day)) {
        this.currentDay = this.dayStr(day)
        this.$emit('day-click', this.dayStr(day))
      }
    },

    next() {
      if (this.calendarMonth === 11) {
        this.calendarYear++
        this.calendarMonth = 0
      } else {
        this.calendarMonth ++
      }
      this.$emit('month-click', this.calendarYear, this.calendarMonth)
    },

    pre() {
      if (this.calendarMonth === 0) {
        this.calendarYear--
        this.calendarMonth = 11
      } else {
        this.calendarMonth --
      }
      this.$emit('month-click', this.calendarYear, this.calendarMonth)
    },

    back() {
      this.calendarMonth = this.currentMonth
      this.calendarYear = this.currentYear
      this.currentDay = this.today
      this.$emit('day-click', this.today)
    },

    goUser() {
      uni.navigateBack({ delta: 1 })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/static/css/variable.scss';
.com-study-calendar {
  text-align: center;
  padding-bottom: 10px;
  &.fixed {
    position: fixed;
    z-index: 2;
    background: #fff;
    width: 100%;
  }
  .month-ctrl {
    position: relative;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #eee;
    line-height: 0;
    .abs-left {
      font-size: 18px;
      position: absolute;
      left: 14px;
      top: 14px;
    }
	.btn{
		width: 20px;
		height: 22px;
		margin: 0 10px;
	}
    span {
      display: inline-block;
      vertical-align: -6px;
      margin: 0;
      font-size: 16px;
    }
    .abs-btn {
      position: absolute;
      right: 5px;
      top: 10px;
      :deep(.van-button__text) {
        font-size: 12px;
      }
    }
  }
  .week-title {
    display: flex;
    color: #999;
    font-size: 14px;
    .week-each {
      flex: 0 0 14.2857142857%;
    }
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .day-wrap {
    display: flex;
    flex-wrap: wrap;
    .day-each {
      flex: 0 0 14.2857142857%;
      padding: 5px 0;
      color: #666;
      font-size: 14px;
      &.disabled {
        span {
          color: #BBB;
          cursor: not-allowed;
        }
      }
      &.has-tip {
        span {
          position: relative;
          &::after {
            content: ' ';
            width: 6px;
            height: 6px;
            background: $primaryColor;
            border-radius: 50%;
            position: absolute;
            bottom: -2px;
            left: 13px;
          }
        }
      }
      &.today {
        span {
          color: $primaryColor;
        }
      }
      &.current {
        span {
          background: $primaryColor;
          color: #fff !important;
          border-radius: 50%;
          &::after {
            bottom: -9px;
          }
        }
      }
      span {
        cursor: pointer;
        width: 30px;
        height: 30px;
        line-height: 30px;
        display: inline-block;
      }
    }
  }
}
</style>